<template>
  <div class="date-wrap">
    <div class="date-box card-shadow">
      <Calendar
        :ref="calendar.ref"
        :months="calendar.months"
        :value="calendar.value"
        :begin="calendar.begin"
        :disabled="calendar.disabled"
        :completion="calendar.completion"
        :tileContent="calendar.tileContent"
        @select="select"/>
    </div>
    <!-- <div class="text-right">
      <div
        class="card-shadow inline-block text-center font15 back-today"
        hover-class="weui-grid_active"
      >回明天</div>
    </div> -->
  </div>
</template>
<script>
import Calendar from '@/components/mpvue-calendar/src/mpvue-calendar.vue'
import '@/components/mpvue-calendar/src/style.css'
import dateUtil from '@/utils/dateUtil'
export default {
  components: { Calendar },
  data () {
    let today = new Date()
    let todayArr = [
      today.getFullYear(),
      today.getMonth() + 1,
      today.getDate()
    ]
    let tomorrow = dateUtil.addDays(new Date(), 1)
    let tomorrowArr = [
      tomorrow.getFullYear(),
      tomorrow.getMonth() + 1,
      tomorrow.getDate()
    ]
    return {
      calendar: {
        ref: 'calendar',
        months: Array.from({ length: 12 }).map((v, i) => i + 1),
        value: tomorrowArr,
        begin: todayArr,
        disabled: [todayArr.join('-')],
        completion: false, // 是否补全日期
        // now: false,
        tileContent: [
          { date: todayArr.join('-'), className: 'is-full', content: '约满' }
        ]
        // arrowLeft: '',
        // arrowRight: '',
      }
    }
  },
  computed: {},
  methods: {
    goToday () {
      let today = new Date()
      let todayArr = [
        today.getFullYear(),
        today.getMonth() + 1,
        today.getDate()
      ]
      this.calendar.value = todayArr
      this.select(todayArr)
    },
    select (val) {
      this.globalData.store.hourWorker = {
        ...this.globalData.store.hourWorker,
        initialDate: dateUtil.format(new Date(val.join('/')), 'yyyy-MM-dd')
      }
      this.navigateBack()
    }
  },
  mounted () {
    const selectTime = decodeURIComponent(this.$root.$mp.query.select || '')
    if (selectTime) {
      let selectDate = new Date(selectTime.replace(/-/g, '/'))
      let selectDateArr = [
        selectDate.getFullYear(),
        selectDate.getMonth() + 1,
        selectDate.getDate()
      ]
      this.calendar.value = selectDateArr
      this.$root.$refs.calendar.renderer(selectDateArr[0], selectDateArr[1])
    }
  }
}
</script>
<style lang="less">
.date-wrap {
  padding: 40upx 30upx;
}
.date-wrap .date-box {
  margin-bottom: 34upx;
  border-radius: 8upx;
  overflow: hidden;
}
.date-wrap .date-box .mpvue-calendar .mc-head-box {
  background-color: #e7effb;
  line-height: 70upx;
}
.date-wrap .date-box .mpvue-calendar .calendar-tools {
  background-color: #3186ff;
  margin-bottom: 0;
  height: 100upx;
  line-height: 100upx;
}
.date-wrap .date-box .mpvue-calendar .calendar-tools .iconfont {
  color: #fff;
}
.date-wrap .date-box .mpvue-calendar .calendar-tools .calendar-info {
  padding-top: 0;
  position: relative;
}
.date-wrap
  .date-box
  .mpvue-calendar
  .calendar-tools
  .calendar-info
  > div.mc-month {
  height: 100upx;
}
.date-wrap
  .date-box
  .mpvue-calendar
  .calendar-tools
  .calendar-info
  > div.mc-month
  .mc-month-inner {
  height: 1200upx;
}
.date-wrap
  .date-box
  .mpvue-calendar
  .calendar-tools
  .calendar-info
  > div.mc-month
  .mc-month-inner
  > span {
  font-size: 70upx;
  height: 100upx;
  color: #fff;
  width: 120upx;
  margin-left: 30upx;
  text-align: right;
}
.date-wrap
  .date-box
  .mpvue-calendar
  .calendar-tools
  .calendar-info
  > div.mc-month
  .mc-month-inner
  > span:after {
  content: "\6708";
  font-size: 30upx;
}
.date-wrap .date-box .mpvue-calendar .calendar-tools .calendar-info .mc-year {
  color: #fff;
  position: absolute;
  top: 20upx;
  right: 40upx;
}
.date-wrap .date-box .mpvue-calendar .reducible .calendar-date {
  background-color: #3186ff;
  border-radius: 50%;
  color: #fff !important;
}
.date-wrap .date-box .mpvue-calendar .reducible .slot-element {
  font-size: 20upx;
  width: 100%;
  bottom: 14upx;
  color: #fff;
}
.date-wrap .date-box .mpvue-calendar .is-full .calendar-date {
  background-color: #f2f2f2;
  border-radius: 50%;
  color: #aaa !important;
}
.date-wrap .date-box .mpvue-calendar .is-full .slot-element {
  font-size: 20upx;
  width: 100%;
  bottom: 14upx;
  color: #aaa;
}
.date-wrap .back-today {
  width: 150upx;
  height: 66upx;
  line-height: 66upx;
  color: #fa4b70;
}
</style>
